<template>
	<div class="user_main">
		<router-link :to="{name:'user', params:{id:user.userid}}" class="usertop">
			<img :src="user.photo" :alt="user.nickname" />
			<h1>{{user.nickname | nonick}}</h1>
		</router-link>
		<div class="user_menu">
			<ul>
				<li><a class="button signout" @click="menuItemHandle($event, 'isTestChecked')">...</a><CustomCheckbox :isChecked="isTestChecked" name="isTestChecked" v-on:customCheckboxChang="customCheckboxChang" /></li>
				<li><a class="button signout" @click="menuItemHandle($event, 'isTest1Checked')">...</a><CustomCheckbox :isChecked="isTest1Checked" name="isTest1Checked" v-on:customCheckboxChang="customCheckboxChang" /></li>
				<li><a class="button signout" @click="menuItemHandle($event, 'isTest2Checked')">...</a><CustomCheckbox :isChecked="isTest2Checked" name="isTest2Checked" v-on:customCheckboxChang="customCheckboxChang" /></li>
			</ul>
			<a class="button signout" @click="menuItemHandle($event, 'downDialog')">downDialogTest</a>
			<a class="button signout" @click="menuItemHandle($event, 'normalDialog')">normalDialogTest</a>
			<a class="button signout" @click="menuItemHandle($event, 1)">...</a>
			<a class="button signout" @click="menuItemHandle($event, 1)">...</a>
		</div>
		<div class="user_menu">
			<a class="button signout" @click="menuItemHandle($event, 1)">...</a>
			<a class="button signout" @click="menuItemHandle($event, 1)">...</a>
			<a class="button signout" @click="menuItemHandle($event, 1)">...</a>
			<a class="button signout" @click="menuItemHandle($event, 1)">...</a>
			<a class="button signout" @click="menuItemHandle($event, 1)">关于和讯</a>
		</div>
		<div class="user_menu">
			<router-link class="button signout" :to="{name: 'signout'}">退出登录</router-link>
		</div>
		<Dialog :isShow="isShow" :menus="downDialogMenus" v-on:dialogMenuItemHandle="dialogMenuItemHandle" v-on:showDialogHandle="showDialogHandle" :dialogData="dialogData" :type="type" />
	</div>
</template>

<script>
	import CustomCheckbox from "../../components/user/custom-checkbox.vue";
	import Dialog from "../../components/common/dialog.vue";
	export default {
		name: "User",
		data: function(){
			return {
				user: {},
				isTestChecked: this.$store.state.userConfig.isTestChecked,
				isTest1Checked: this.$store.state.userConfig.isTest1Checked,
				isTest2Checked: this.$store.state.userConfig.isTest2Checked,
				isShow: false,
				type:"downDialog",
				dialogData:{
					content:"这是普通对话框Demo",
					enterHandel: function(next){
						console.log('enter')
						next();
					},
					entermsg:"确认",
					cancelmsg:"取消"
				},
				downDialogMenus: [{
					title: "test",
					handle: function(callback){
						callback("dialogMenuItemHandle", {
							name: "testa",
							value: true
						});
					}
				}]
			}
		},
		components:{
			CustomCheckbox,
			Dialog
		},
		filters:{
			nonick: function(value){
				return isPlainObject(value) && (value || this.$store.state.user.username) || value;
			}
		},
		created:function(){
			let sign = this.$store.state.user;
			if (sign.islogin === "True"){
				this.$set(this, "user", this.$store.state.user);
				this.$emit("upLocalData", [{
					name: "type",
					value: "user"
				},{
					name: "channelName",
					value: "用户"
				}]);
			}else{
				this.$router.push({name:"home"});
			}
		},
		methods:{
			dialogMenuItemHandle(args){
				switch(args.name){
					case "testa":
						this.$set(this, "isTestChecked", args.value);
						this.$store.commit("setUserConfig", {
							"isTestChecked": args.value
						});
						break;
				}
				
			},
			menuItemHandle(e, type){
				switch(type){
					case "downDialog":
						this.$set(this, "type", "downDialog")
						this.$set(this, "isShow", true);
						break;
					case "normalDialog":
						this.$set(this, "type", "normalDialog")
						this.$set(this, "isShow", true);
						break;
					default:
						let bool = this[type] === false ? true : false;
						this.$set(this, type, bool);
						this.$store.commit("setUserConfig", {
							[type]: bool
						});
						break;
				}
				
			},
			customCheckboxChang(args, name){
				console.log(name)
				this.$set(this, name, args);
				this.$store.commit("setUserConfig", {
					[name]: args
				});
			},
			showDialogHandle(args){
				this.$set(this, "isShow", args);
			}
		},
		watch:{
			$route:function(){
				this.$set(this, "user", this.$store.state.user);
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.user_main{
		background-color: #fff;
		padding:10/@base 20/@base;
		text-align:center;
		min-height: 700/@base;
		a{
			display:block;
			color:#000;
			&.usertop{
				font-size:26/@base;
				padding:20/@base 0;
				img{
					width:64/@base;
					height:64/@base;
					overflow: hidden;
					border-radius: 64/@base;
				}
				h1{
					font-size:26/@base;
					font-weight: 400;
				}
			}
		}
		div{
			&.user_menu{
				background-color: #fff;
				margin-top:10/@base;
				ul{
					li{
						display:flex;
						background-color: #efefef;
						border-bottom:1/@base solid #DADADA;
						a{
							width:90%;
							&.button{
								border:0;
							}
						}
						span{
							&.custom_checkbox{
								margin:20/@base 20/@base 0;
							}
						}
					}
				}
				a{
					&.button{
						font-size:22/@base;
						border:0;
						border-bottom:1/@base solid #DADADA;
						display:block;
						padding:20/@base;
						background-color: #efefef;
						&:last-child{
							border:0;
						}
					}
				}
			}
		}
	}
</style>
